<!--
 * @Description: 驾驶舱-头部
 * @FilePath: \hk-computerRoom-Security\src\views\home\component\home-head.vue
 * @Date: 2024-02-19 16:09:03
 * @LastEditTime: 2024-02-22 09:09:29
-->

<template>
	<div class="home-head">
		<div class="home-title">机房安全监测管理系统</div>
		<div class="home-return" @click.stop="emit('refresh')">
			<img src="../../../assets/images/home/return.svg" alt="" />
		</div>
		<div class="home-time">{{ state.time.txt }}</div>
	</div>
</template>
<script setup lang="ts" name="home-head">
import { reactive, onMounted } from 'vue';
import { formatDate } from '/@/utils/formatTime';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const state = reactive({
	time: {
		txt: '',
		fun: 0,
	},
});

// 初始化时间
const initTime = () => {
	state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW');
	state.time.fun = window.setInterval(() => {
		state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW');
	}, 1000);
};

onMounted(() => {
	initTime();
});
</script>
<style lang="scss" scoped>
.home-head {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	background-image: url('../../../assets/images/home/home-head-new.svg');
	background-size: 100% 100%;
	display: flex;
	position: relative;

	.home-title {
		margin-top: 8px;
		font-size: 38px;
		font-family: ShuHeiTi;
		font-weight: bold;
		line-height: 45px;
		letter-spacing: 5px;
		text-shadow: 0px 5px 30px #499afd;
		background: linear-gradient(180deg, #fbfcff 16%, #83d2ff 32%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.home-return {
		position: absolute;
		top: 45%;
		right: 50px;
		cursor: pointer;
		pointer-events: all;
	}

	.home-time {
		position: absolute;
		top: 50%;
		left: 80px;
		font-size: 20px;
		font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
		color: #e7f1fb;
	}
}
</style>
